import CornerstoneViewport from 'react2-cornerstone-viewport';
import OHIF from '@ohif/core';
import { connect } from 'react-redux';
import { setEnabledElement } from './state';
import { useContextMenu } from 'react-contexify';
import DEFAULT_CONTEXT from './defaultContext';

const { setViewportActive, setViewportSpecificData, setViewportMaximized } = OHIF.redux.actions;

const mapStateToProps = (state, ownProps) => {
  let dataFromStore;

  // TODO: This may not be updated anymore :thinking:
  if (state.extensions && state.extensions.cornerstone) {
    dataFromStore = state.extensions.cornerstone;
  }

  // If this is the active viewport, enable prefetching.
  const { viewportIndex } = ownProps; //.viewportData;
  const modeState = state.viewports[state.viewports.viewMode];
  const isActive = viewportIndex === modeState.activeViewportIndex;
  const viewportSpecificData =
    modeState.viewportSpecificData[viewportIndex] || {};

  // CINE
  let isPlaying = false;
  let frameRate = 24;

  if (viewportSpecificData && viewportSpecificData.cine) {
    const cine = viewportSpecificData.cine;

    isPlaying = cine.isPlaying === true;
    frameRate = cine.fps || frameRate;
  }

  const { numRows, numColumns, activeViewportIndex: activeImageViewportIndex = 0 } = modeState.layout.viewports[viewportIndex];

  const { showPatientInfo, showCornerInfo, showRefLine, imageSync } = state.preferences.commons;

  return {
    // layout: state.viewports.layout,
    isActive,
    // TODO: Need a cleaner and more versatile way.
    // Currently justing using escape hatch + commands
    // activeTool: activeButton && activeButton.command,
    ...dataFromStore,
    isStackPrefetchEnabled: false,
    isPlaying,
    frameRate,
    //stack: viewportSpecificData.stack,
    // viewport: viewportSpecificData.viewport,
    numRows,
    numColumns,
    activeViewportIndex: modeState.activeViewportIndex,
    activeImageViewportIndex,
    // common settings
    showPatientInfo,
    showCornerInfo,
    showRefLine,
    imageSync,
  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  const { viewportIndex } = ownProps;

  return {
    setViewportActive: imageViewportIndex => {
      dispatch(setViewportActive(viewportIndex, imageViewportIndex));
    },

    setViewportSpecificData: data => {
      dispatch(setViewportSpecificData(viewportIndex, data));
    },

    onDoubleClick: viewportIndex => {
      dispatch(setViewportMaximized(viewportIndex));
    },

    onContextMenu: e => {
      const { show } = useContextMenu({ id: DEFAULT_CONTEXT });
      show(e);
    },

    /**
     * Our component "enables" the underlying dom element on "componentDidMount"
     * It listens for that event, and then emits the enabledElement. We can grab
     * a reference to it here, to make playing with cornerstone's native methods
     * easier.
     */
    onElementEnabled: (imageViewportIndex, element) => {
      setEnabledElement(viewportIndex, imageViewportIndex, element);
      dispatch(
        setViewportSpecificData(viewportIndex, {
          // TODO: Hack to make sure our plugin info is available from the outset
          plugin: 'cornerstone',
        })
      );
    },
  };
};

const ConnectedCornerstoneViewport = connect(
  mapStateToProps,
  mapDispatchToProps
)(CornerstoneViewport);

export default ConnectedCornerstoneViewport;
